<template>
	<view class="container">
		
		<!-- 商品图轮播 -->
		<swiper class="product-swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item, index) in productImages" :key="index">
				<image :src="item" mode="aspectFill" class="product-image"></image>
			</swiper-item>
		</swiper>

		<!-- 商品信息 -->
		<view class="product-info">
			<view class="price-section">
				<text class="price">¥{{product.price}}</text>
				<text class="original-price">¥{{product.originalPrice}}</text>
				<text class="sales">已售{{product.sales}}件</text>
			</view>
			<view class="title">{{product.name}}</view>
			<view class="desc">
				<rich-text :nodes="product.note"></rich-text>
			</view>
		</view>

		<!-- 商品规格 -->
		<view class="specs-section" @click="showSpecsPopup">
			<text>规格</text>
			<view class="selected-specs">
				<text>{{selectedSpecs || '请选择规格'}}</text>
			</view>
			<text class="arrow">></text>
		</view>

		<!-- 商品详情 -->
		<view class="detail-section">
			<view class="section-title">商品详情</view>
			<rich-text :nodes="product.note" class="detail-content"></rich-text>
		</view>

		<!-- 推荐商品 -->
		<view class="recommend-section">
			<view class="section-title">
				<text class="title">猜你喜欢</text>
				<text class="more" @click="navigateToMore('guess')">更多</text>
			</view>
			<scroll-view scroll-x class="recommend-scroll">
				<view
					class="recommend-item"
					v-for="(item, index) in guessList"
					:key="index"
					@click="navigateToDetail(item.id)"
				>
					<image :src="item.logo" mode="aspectFill" class="product-img"></image>
					<text class="name">{{item.name}}</text>
					<text class="price">¥{{item.price}}</text>
				</view>
			</scroll-view>
		</view>

		<view class="recommend-section">
			<view class="section-title">
				<text class="title">相关推荐</text>
				<text class="more" @click="navigateToMore('related')">更多</text>
			</view>
			<view class="product-grid">
				<view
					class="product-item"
					v-for="(item, index) in relatedList"
					:key="index"
					@click="navigateToDetail(item.id)"
				>
					<image :src="item.logo" mode="aspectFill" class="product-img"></image>
					<view class="product-info">
						<text class="name">{{item.name}}</text>
						<text class="price">¥{{item.price}}</text>
						<text class="sales">已售{{item.sales}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="recommend-section">
			<view class="section-title">
				<text class="title">热销商品</text>
				<text class="more" @click="navigateToMore('hot')">更多</text>
			</view>
			<view class="product-list">
				<view
					class="product-item"
					v-for="(item, index) in hotList"
					:key="index"
					@click="navigateToDetail(item.id)"
				>
					<image :src="item.logo" mode="aspectFill" class="product-img"></image>
					<view class="product-info">
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.description}}</text>
						<view class="bottom">
							<text class="price">¥{{item.price}}</text>
							<text class="sales">已售{{item.sales}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品评论 -->
		<view class="comment-section">
			<view class="section-title">
				<text class="title">商品评价</text>
				<text class="more" @click="navigateToMore('comment')">更多</text>
			</view>
			<view class="comment-list">
				<view class="comment-item" v-for="(item, index) in comments" :key="index">
					<view class="comment-header">
						<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
						<view class="user-info">
							<text class="user-name">{{item.userName}}</text>
							<view class="rating">
								<text class="star" v-for="n in 5" :key="n" :class="{ active: n <= item.rating }">★</text>
							</view>
						</view>
						<text class="time">{{item.createTime}}</text>
					</view>
					<view class="comment-content">{{item.content}}</view>
					<view class="comment-images" v-if="item.images && item.images.length">
						<image
							v-for="(img, imgIndex) in item.images"
							:key="imgIndex"
							:src="img"
							mode="aspectFill"
							class="comment-img"
							@click="previewImage(item.images, imgIndex)"
						></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="left-btns">
				<view class="icon-btn" @click="navigateToCart">
					<text class="icon">🛒</text>
					<text>购物车</text>
				</view>
				<view class="icon-btn" @click="toggleFavorite">
					<text class="icon">{{isFavorite ? '❤️' : '🤍'}}</text>
					<text>收藏</text>
				</view>
			</view>
			<view class="right-btns">
				<button class="add-cart-btn" @click="showSpecsPopup">加入购物车</button>
				<button class="buy-btn" @click="showSpecsPopup">立即购买</button>
			</view>
		</view>

		<!-- 右侧浮动分享按钮 -->
		<view class="float-share-btn" @click="showSharePopup">
			<text class="icon">📤</text>
		</view>

		<!-- 规格选择弹窗 -->
		<uni-popup ref="specsPopup" type="bottom">
			<view class="specs-popup">
				<view class="popup-header">
					<image :src="productImages[0]" mode="aspectFill" class="popup-image"></image>
					<view class="popup-info">
						<view class="popup-price">¥{{product.price}}</view>
						<view class="popup-stock">库存：{{product.stock}}件</view>
					</view>
					<text class="close-btn" @click="closeSpecsPopup">×</text>
				</view>
				<view class="popup-content">
					<view class="specs-title">规格</view>
					<view class="specs-list">
						<view
							class="specs-item"
							v-for="(item, index) in product.specs"
							:key="index"
							:class="{ active: selectedSpecs === item }"
							@click="selectSpecs(item)"
						>
							{{item}}
						</view>
					</view>
					<view class="quantity-section">
						<text>数量</text>
						<view class="quantity-control">
							<text class="minus" @click="decreaseQuantity">-</text>
							<input type="number" v-model="quantity" class="quantity-input" />
							<text class="plus" @click="increaseQuantity">+</text>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="confirm-btn" @click="confirmSpecs">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 分享弹窗 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<view class="share-title">分享到</view>
				<view class="share-list">
					<view class="share-item" @click="shareTo('weixin')">
						<text class="icon">💬</text>
						<text>微信好友</text>
					</view>
					<view class="share-item" @click="shareTo('moments')">
						<text class="icon">⭕</text>
						<text>朋友圈</text>
					</view>
					<view class="share-item" @click="shareTo('weibo')">
						<text class="icon">🌐</text>
						<text>微博</text>
					</view>
					<view class="share-item" @click="shareTo('qq')">
						<text class="icon">💬</text>
						<text>QQ好友</text>
					</view>
					<view class="share-item" @click="shareTo('link')">
						<text class="icon">🔗</text>
						<text>复制链接</text>
					</view>
				</view>
				<view class="share-cancel" @click="closeSharePopup">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {loadPostCallback, loadPostData} from "/common/api";
import {useData} from "/common/useData";
import {onLoad} from "@dcloudio/uni-app";

// 商品数据
const product = ref({
	id: '',
	name: '测试商品',
	description: '这是一个测试商品',
	price: '99.00',
	originalPrice: '199.00',
	sales: 100,
	stock: 50,
	specs: ['小份', '中份', '大份', '特大份'],
	detail: '<div>商品详情内容</div>',
	logo: 'https://via.placeholder.com/400x400'
})

// 商品图片
const productImages = ref([])

// 评论数据
const comments = ref([
	{
		id: 1,
		userName: '用户1',
		avatar: 'https://via.placeholder.com/100',
		content: '很好吃，分量足，下次还会购买',
		rating: 5,
		images: ['https://via.placeholder.com/200'],
		createTime: '2024-03-20 12:00:00'
	},
	{
		id: 2,
		userName: '用户2',
		avatar: 'https://via.placeholder.com/100',
		content: '味道不错，服务态度好',
		rating: 4,
		images: [],
		createTime: '2024-03-19 15:30:00'
	}
])

// 猜你喜欢
const {modelData:guessList}=useData("/product/search",{size:5})

// 相关推荐
const {modelData:relatedList}=useData("/product/search",{size:5})
// 热销商品
const {modelData:hotList}=useData("/product/search",{size:5})

// 选中的规格
const selectedSpecs = ref('')
// 商品数量
const quantity = ref(1)
// 是否收藏
const isFavorite = ref(false)

// 规格选择弹窗引用
const specsPopup = ref(null)

// 分享弹窗引用
const sharePopup = ref(null)

// 获取商品详情
const fetchProductDetail = (id) => {
  console.info('fetchProductDetail',id)
  loadPostCallback("/product/view", {id},res=>{
    product.value=res.data
    if (product.value.images && product.value.images.length > 0) {
      productImages.value = product.value.images
    } else {
      productImages.value = [product.value.logo]
    }
  })
}

// 显示规格选择弹窗
const showSpecsPopup = () => {
	uni.showActionSheet({
		itemList: product.value.specs,
		success: (res) => {
			selectedSpecs.value = product.value.specs[res.tapIndex]
			// 选择规格后显示数量选择
			uni.showModal({
				title: '选择数量',
				content: `当前选择：${selectedSpecs.value}\n请输入购买数量`,
				editable: true,
				placeholderText: '请输入数量',
				success: (res) => {
					if (res.confirm) {
						const num = parseInt(res.content)
						if (num > 0 && num <= product.value.stock) {
							quantity.value = num
							uni.showToast({
								title: `已选择${selectedSpecs.value}规格，数量${quantity.value}`,
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '数量超出范围',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	})
}

// 关闭规格选择弹窗
const closeSpecsPopup = () => {
	// 使用原生弹窗不需要关闭操作
}

// 选择规格
const selectSpecs = (spec) => {
	selectedSpecs.value = spec
}

// 增加数量
const increaseQuantity = () => {
	if (quantity.value < product.value.stock) {
		quantity.value++
	}
}

// 减少数量
const decreaseQuantity = () => {
	if (quantity.value > 1) {
		quantity.value--
	}
}

// 确认规格选择
const confirmSpecs = () => {
	if (!selectedSpecs.value) {
		uni.showToast({
			title: '请选择规格',
			icon: 'none'
		})
		return
	}

	uni.showToast({
		title: `已选择${selectedSpecs.value}规格，数量${quantity.value}`,
		icon: 'success'
	})
	closeSpecsPopup()
}

// 跳转到购物车
const navigateToCart = () => {
	uni.navigateTo({
		url: '/pages/cart/cart'
	})
}

// 切换收藏状态
const toggleFavorite = () => {
	isFavorite.value = !isFavorite.value
	uni.showToast({
		title: isFavorite.value ? '已收藏' : '已取消收藏',
		icon: 'success'
	})
}

// 跳转到更多推荐
const navigateToMore = (type) => {
	uni.navigateTo({
		url: `/pages/recommend/index?type=${type}`
	})
}

// 显示分享弹窗
const showSharePopup = () => {
	sharePopup.value.open()
}

// 关闭分享弹窗
const closeSharePopup = () => {
	sharePopup.value.close()
}

// 分享到不同平台
const shareTo = (platform) => {
	const shareInfo = {
		title: product.value.name,
		desc: product.value.description,
		imageUrl: productImages.value[0],
		path: `/pages/detail/view?id=${product.value.id}`
	}

	switch(platform) {
		case 'weixin':
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				...shareInfo
			})
			break
		case 'moments':
			uni.share({
				provider: 'weixin',
				scene: 'WXSenceTimeline',
				type: 0,
				...shareInfo
			})
			break
		case 'weibo':
			uni.share({
				provider: 'weibo',
				type: 0,
				...shareInfo
			})
			break
		case 'qq':
			uni.share({
				provider: 'qq',
				scene: 'WXSceneSession',
				type: 0,
				...shareInfo
			})
			break
		case 'link':
			uni.setClipboardData({
				data: `https://your-domain.com/pages/detail/view?id=${product.value.id}`,
				success: () => {
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					})
				}
			})
			break
	}

	closeSharePopup()
}

// 处理搜索
const handleSearch = (keyword) => {
	uni.navigateTo({
		url: `/pages/search/index?keyword=${encodeURIComponent(keyword)}`
	})
}

// 页面加载时获取商品详情
onLoad((options) => {
	if(options.id) {
		fetchProductDetail(options.id)
	}
})
</script>

<style>
.container {
	padding-bottom: 100rpx;
}

/* 商品图片轮播 */
.product-swiper {
	height: 750rpx;
}

.product-image {
	width: 100%;
	height: 750rpx;
}

/* 商品信息 */
.product-info {
	padding: 20rpx;
	background-color: #FFFFFF;
}

.price-section {
	margin-bottom: 10rpx;
}

.price {
	font-size: 40rpx;
	color: #D02B29;
	font-weight: bold;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 20rpx;
}

.sales {
	font-size: 24rpx;
	color: #999;
	margin-left: 20rpx;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.desc {
	font-size: 26rpx;
	color: #666;
}

/* 规格选择 */
.specs-section {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #FFFFFF;
	margin-top: 20rpx;
}

.selected-specs {
	flex: 1;
	margin: 0 20rpx;
	color: #666;
}

.arrow {
	color: #999;
}

/* 商品详情 */
.detail-section {
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #FFFFFF;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	border-top: 1rpx solid #EEEEEE;
}

.left-btns {
	display: flex;
}

.icon-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 30rpx;
}

.icon {
	font-size: 40rpx;
	margin-bottom: 5rpx;
}

.right-btns {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.add-cart-btn, .buy-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	margin-left: 20rpx;
}

.add-cart-btn {
	background-color: #FFF5F5;
	color: #D02B29;
}

.buy-btn {
	background-color: #D02B29;
	color: #FFFFFF;
}

/* 右侧浮动分享按钮样式 */
.float-share-btn {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #D02B29;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(208, 43, 41, 0.3);
	z-index: 100;
}

.float-share-btn .icon {
	font-size: 50rpx;
	color: #FFFFFF;
}

/* 规格选择弹窗 */
.specs-popup {
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
}

.popup-header {
	display: flex;
	padding: 20rpx;
	position: relative;
}

.popup-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.popup-info {
	flex: 1;
}

.popup-price {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.popup-stock {
	font-size: 24rpx;
	color: #999;
}

.close-btn {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	font-size: 40rpx;
	color: #999;
}

.popup-content {
	padding: 20rpx;
}

.specs-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.specs-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
}

.specs-item {
	padding: 10rpx 30rpx;
	border: 1rpx solid #DDDDDD;
	border-radius: 30rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
	color: #666;
}

.specs-item.active {
	background-color: #FFF5F5;
	border-color: #D02B29;
	color: #D02B29;
}

.quantity-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.quantity-control {
	display: flex;
	align-items: center;
}

.minus, .plus {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #F5F5F5;
	border-radius: 30rpx;
}

.quantity-input {
	width: 100rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin: 0 20rpx;
}

.popup-footer {
	padding: 20rpx;
}

.confirm-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
}

/* 推荐商品样式 */
.recommend-section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 30rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title .title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-title .more {
	font-size: 24rpx;
	color: #999;
}

/* 猜你喜欢样式 */
.recommend-scroll {
	white-space: nowrap;
}

.recommend-item {
	display: inline-block;
	width: 200rpx;
	margin-right: 20rpx;
}

.recommend-item .product-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.recommend-item .name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.recommend-item .price {
	font-size: 28rpx;
	color: #D02B29;
	font-weight: bold;
}

/* 相关推荐样式 */
.product-grid {
	display: flex;
	flex-wrap: wrap;
}

.product-grid .product-item {
	width: calc(50% - 20rpx);
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}

.product-grid .product-img {
	width: 100%;
	height: 300rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.product-grid .product-info {
	padding: 10rpx;
}

.product-grid .name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-grid .price {
	font-size: 32rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.product-grid .sales {
	font-size: 24rpx;
	color: #999;
}

/* 热销商品样式 */
.product-list .product-item {
	display: flex;
	margin-bottom: 30rpx;
}

.product-list .product-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-list .product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-list .name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-list .desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.product-list .bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-list .price {
	font-size: 32rpx;
	color: #D02B29;
	font-weight: bold;
}

.product-list .sales {
	font-size: 24rpx;
	color: #999;
}

/* 评论样式 */
.comment-section {
	background-color: #FFFFFF;
	margin-top: 20rpx;
	padding: 30rpx;
}

.comment-list {
	margin-top: 20rpx;
}

.comment-item {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.rating {
	display: flex;
}

.star {
	font-size: 24rpx;
	color: #DDDDDD;
	margin-right: 4rpx;
}

.star.active {
	color: #FFB800;
}

.time {
	font-size: 24rpx;
	color: #999;
}

.comment-content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
	margin-bottom: 20rpx;
}

.comment-images {
	display: flex;
	flex-wrap: wrap;
}

.comment-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}

/* 分享弹窗样式 */
.share-popup {
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
}

.share-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 30rpx;
}

.share-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx;
}

.share-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
}

.share-item .icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.share-item text:last-child {
	font-size: 24rpx;
	color: #666;
}

.share-cancel {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	border-top: 1rpx solid #EEEEEE;
	margin-top: 20rpx;
}

/* 商品详情样式 */
.detail-content {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.detail-content image {
	width: 90% !important;
	height: auto !important;
	margin: 20rpx auto;
	display: block;
}

.detail-content p {
	margin-bottom: 20rpx;
}

.detail-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20rpx;
}

.detail-content td, .detail-content th {
	border: 1rpx solid #EEEEEE;
	padding: 10rpx;
}

/* 商品简介样式 */
.desc rich-text {
	display: block;
}

.desc rich-text image {
	width: 90% !important;
	height: auto !important;
	margin: 20rpx auto;
	display: block;
}
</style>
